<template>
  <div class="filer-bar">
    <div class="filer-bar-left filer-bar-c">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
      </van-dropdown-menu>
    </div>
    <div class="filer-bar-right filer-bar-c">筛选</div>
  </div>
</template>

<script setup lang="ts" name="FilerBar">
// 筛选菜单
import { ref } from 'vue'
const value1 = ref(0)
const option1 = [
  { text: '2025年1月', value: 0 },
  { text: '新款商品', value: 1 },
  { text: '活动商品', value: 2 },
]
</script>

<style scoped lang="less">
.filer-bar {
    display: flex;
    font-weight: 600;

    .filer-bar-c {
      width: 50%;
    }

    .filer-bar-right {
      font-size: 29px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #323233;
    }

    .van-dropdown-menu {
      --van-dropdown-menu-background: none;
      --van-dropdown-menu-shadow: none;
    }
  }
</style>